<template>
	<div class="bannermanage">
		<el-form :inline="true">
            <el-form-item label="推送终端：">
                <el-select v-model="params.pushTerminal">
                    <el-option v-for="(item,index) in pushTerminals"
                               :key="index"
                               :label="item.label"
                               :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="城市：">
                <el-select v-model="params.cityId" filterable >
                    <el-option v-for="item in citys"
                               :key="item.cityId"
                               :label="item.city"
                               :value="item.cityId">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="推荐位：" >
                <el-select v-model="params.recommendPosition">
                    <el-option v-for="(item,index) in recommendPositions"
                               :key="index"
                               :label="item.label"
                               :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="query" id="monitorEnter">查询</el-button>
                <el-button type="primary" @click="fn('add')">新增</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="tableData" border stripe v-loading="tableLoading">
            <el-table-column type="index" label="序号" width="80" align="center" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column label="推送终端" prop="pushTerminal" :formatter="pushTerminal" align="center" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column label="城市站" prop="cityName" align="center" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column label="推荐位" prop="recommendPosition" align="center" :formatter="recommendPositionss" :show-overflow-tooltip="true"> </el-table-column>
            <el-table-column label="位置序号" prop="locationNum" align="center" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column label="icon" prop="bannerAddress" align="center" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <img :src="scope.row.bannerAddress" alt="" style="width: 100px;height: 50px;">
                </template>
            </el-table-column>
            <el-table-column label="链接地址" prop="linkAddress" align="center" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="fn('edit',scope.row.id)">编辑</el-button>
                    <el-button type="text" size="small" @click="fn('del',scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="params.pageNum"
            :page-sizes="[5, 10, 20, 50]"
            :page-size="params.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total" style="margin-top:30px;">
    	</el-pagination>
    	<el-dialog :title="type=='add'?'新增banner':'编辑banner' " :visible.sync="centerDialogVisible" width="30%">
	    	<el-form :model="aoeparams" :rules="rules" label-width="100px" ref="form">
	            <el-form-item label="推送终端：" class="pushTerminal" prop="pushTerminal">
	                <el-select v-model="aoeparams.pushTerminal">
	                    <el-option v-for="(item,index) in pushTerminalssss"
	                               :key="index"
	                               :label="item.label"
	                               :value="item.value">
	                    </el-option>
	                </el-select>
	            </el-form-item>
	            <el-form-item label="城市：" class="citys" prop="cityId">
	                <el-select v-model="aoeparams.cityId" filterable >
	                    <el-option v-for="item in citys"
	                               :key="item.cityId"
	                               :label="item.city"
	                               :value="item.cityId">
	                    </el-option>
	                </el-select>
	            </el-form-item>
	            <el-form-item label="推荐位：" class="recommendPosition" prop="recommendPosition">
	                <el-select v-model="aoeparams.recommendPosition" @change="changePos">
	                    <el-option v-for="(item,index) in recommendPositionssss"
	                               :key="index"
	                               :label="item.label"
	                               :value="item.value">
	                    </el-option>
	                </el-select>
	            </el-form-item>
	            <el-form-item label="位置序号：" class="banner" v-if="aoeparams.recommendPosition==0">
	                <el-select v-model="aoeparams.locationNum">
	                    <el-option v-for="(item,index) in locationNums"
	                               :key="index"
	                               :label="item.label"
	                               :value="item.value">
	                    </el-option>
	                </el-select>
	            </el-form-item>
	            <el-form-item label="位置序号：" class="banner" v-if="aoeparams.recommendPosition==1">
	                <el-select v-model="aoeparams.locationNum">
	                    <el-option v-for="(item,index) in locationNumss"
	                               :key="index"
	                               :label="item.label"
	                               :value="item.value">
	                    </el-option>
	                </el-select>
	            </el-form-item>
	            <el-form-item label="链接地址：" prop="linkAddress">
	                <el-input v-model.trim="aoeparams.linkAddress" style="width: 300px"></el-input>
	            </el-form-item>
	            <el-form-item label="banner图：" class="banner">
	                <uploadImg @uploadSuccess="uploadSuccess" v-model="aoeparams.bannerAddress"></uploadImg>
	            </el-form-item>
	            <el-form-item>
	                <el-button type="primary" @click="save" :loading="loading">保存</el-button>
	                <el-button type="primary" @click="cancel">取消</el-button>
	            </el-form-item>
	        </el-form>
	    </el-dialog>
	</div>
</template>

<script>
	import uploadImg from "../../components/common/uploadImg"
	export default{
		name:"bannermanage",
		data(){
			return {
				type:"",
				centerDialogVisible:false,
				tableData:[],
				citys:[],
				params:{
					pageNum: 1,
					pageSize:10,
					cityId:"",
					pushTerminal:"",
					recommendPosition:""
				},
				tableLoading: false,
				pushTerminals:[
					{value: "", label: "全部"},
					{value: "0", label: "经纪人app"},
					{value: "1", label: "好生活-好房"},
					{value: "2", label: "管家端app"},
					{value: "3", label: "集团小程序"},
				],
				pushTerminalssss:[
		            {value: "0", label: "经纪人app"},
		            {value: "1", label: "好生活-好房"},
		            {value: "2", label: "管家端app"},
		            {value: "3", label: "集团小程序"}
		        ],
				recommendPositions:[
					{value: "", label: "全部"},
					{value: "0", label: "banner位"},
					{value: "1", label: "头条推荐位"}
				],
				recommendPositionssss:[
					{value: "0", label: "banner位"},
					{value: "1", label: "头条推荐位"}
				],
				locationNums:[
		            {value: "1", label: "1号位"},
		            {value: "2", label: "2号位"},
		            {value: "3", label: "3号位"},
		            {value: "4", label: "4号位"},
		            {value: "5", label: "5号位"}
		        ],
		        locationNumss:[
		            {value: "1", label: "1号位"},
		            {value: "2", label: "2号位"},
		            {value: "3", label: "3号位"},
		            {value: "4", label: "4号位"}
		        ],
		        loading:false,
		        aoeparams:{
		            pushTerminal:"1",
		            cityId:"110100",
		            recommendPosition:"0",
		            locationNum:"",
		            linkAddress:"",
		            bannerAddress:""
		        },
				rules:{
					pushTerminal:[{required: true, message: '请选择推送终端', trigger: 'change'}],
					cityId:[{required: true, message: '请选择城市', trigger: 'change'}],
					recommendPosition:[{required: true, message: '请选择推荐位', trigger: 'change'}],
					linkAddress:[{
					required: true,
						validator: (rule, value, callback) => {
						if (!value) {
							return callback(new Error('请填写链接地址'));
						}
							let reg = /[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+\.?/;
							if (!reg.test(value)) {
							return callback(new Error('请输入正确的链接地址'));
						}
							callback();
						}
					}]
				},
				total:0
			}
		},
		methods:{
			uploadSuccess(data){
				this.aoeparams.bannerAddress=data;
			},
			fn(type,id){
				this.type=type;
	            if(type=="add"){
	            	this.aoeparams.pushTerminal="1";
	            	this.aoeparams.cityId="110100";
	            	this.aoeparams.recommendPosition="0";
	            	this.aoeparams.locationNum="";
	            	this.aoeparams.linkAddress="";
	            	this.aoeparams.bannerAddress="";
	                this.centerDialogVisible=true;
	            }else if(type=="del"){
	                this.$confirm('确认删除吗？', '提示', {
	                    confirmButtonText: '确定',
	                    cancelButtonText: '取消',
	                    type: 'warning'
	                }). then(()=>{
	                    this.$axios.post(`/cms/banner/delete`, {id:id}).then((res) => {
	                    	this.loadData();
	                    	this.$message({
								message: '操作成功',
								type: 'success'
							});
	                    });
	                }).catch(()=>{

	                })

	            }else if(type=="edit"){
	                this.loadEditData(id);
	                this.centerDialogVisible=true;
	            }
	        },
	        pushTerminal(row,col,value){
	            if(row.pushTerminal==0){
	                return "经纪人app"
	            }
	            if(row.pushTerminal==1){
	                return "好生活-好房"
	            }
	            if(row.pushTerminal==2){
	                return "管家端app"
	            }
	            if(row.pushTerminal==3){
	                return "集团小程序"
	            }
	        },
	        recommendPositionss(row,col,value){
	            if(row.recommendPosition==0){
	                return "banner位"
	            }
	            if(row.recommendPosition==1){
	                return "头条推荐位"
	            }
	        },
	        loadCity() {
	            this.$axios.post(`/city/cityList`).then(res => {
	                this.citys = res.cityList;
	                this.citys.unshift({
	                    city:"全国站",
	                    cityId:"100100",
	                    id: "",
	                    provinceid:"",
	                    tableDevId:"",
	                    tableId:""
	                })
	                if(this.type !=="add" && this.type !=="edit" && this.type !=="del"){
	                	this.citys.unshift({
		                    city:"全部",
		                    cityId:"",
		                    id: "",
		                    provinceid:"",
		                    tableDevId:"",
		                    tableId:""
		                })
	                }
	            });
	        },
	        loadData() {
	            this.tableLoading = true;
	            this.$axios.post(`/cms/banner/list`, this.params).then((res) => {
	                this.tableLoading = false;
	                this.tableData=res.list
	                this.total=res.total
	            });
	        },
	        query(){
	        	this.params.pageNum=1;
	            this.loadData();
	        },
	        handleSizeChange(val) {
	            this.params.pageSize = val;
	            this.loadData();
	        },
	        handleCurrentChange(val) {
	            this.params.pageNum = val;
	            this.loadData();
        	},
        	changePos(){
	            this.aoeparams.locationNum=""
	        },
	        save(){
	            
	            this.$refs['form'].validate((valid)=>{
	                if(!valid){
	                    return
	                }
	                if(this.aoeparams.locationNum==""){
		            	this.$message({
							showClose: true,
							message: '选择位置序号',
							type: 'warning',
							onClose:()=>{
								
							}
						});
		                return
		            }
		            if(this.aoeparams.bannerAddress==""){
		            	this.$message({
							showClose: true,
							message: '请上传banner图',
							type: 'warning',
							onClose:()=>{
								
							}
						});
		                return
		            }
	                this.aoeparams.linkAddress=this.aoeparams.linkAddress.trim();
	                if(this.type=="add"){
	                	delete this.aoeparams.id;
	                	delete this.aoeparams.createTime;
	                	this.$axios.post('/cms/banner/add',this.aoeparams).then((res)=>{
	                		console.log("xxx");
		                	this.$message({
								showClose: true,
								message: '操作成功',
								type: 'success',
								onClose:()=>{
									this.centerDialogVisible=false;
									this.loadData();
								}
							});
		                }).catch((error)=>{
		                	
		                })
	                }else{
	                	this.$axios.post('/cms/banner/update',this.aoeparams).then((res)=>{
		                	this.$message({
								showClose: true,
								message: '操作成功',
								type: 'success',
								onClose:()=>{
									this.centerDialogVisible=false;
									this.loadData();
								}
							});
		                }).catch((error)=>{
		                	
		                })
	                }
	            })
	        },
	        cancel(){
	            this.centerDialogVisible=false;
	        },
	        loadEditData(id){
				this.$axios.post('/cms/banner/getBannerById',{id:id}).then((res)=>{
	                this.aoeparams=res;
	                this.aoeparams.pushTerminal=res.pushTerminal.toString();
	                this.aoeparams.cityId=res.cityId.toString();
	                this.aoeparams.recommendPosition=res.recommendPosition.toString();
	            }).catch((error)=>{
	            	console.log(error)
	            })
	        }
		},
		created(){
			
		},
		mounted(){
			this.loadData();
	        this.loadCity();
		},
		components:{
			uploadImg
		}
	}
</script>

<style lang="stylus">
	.bannermanage{
		.banner .el-form-item__label:before{
	        content: '*';
	        color: #f56c6c;
	        margin-right: 4px;
	    }
	    .pushTerminal .el-form-item__label:before{
	        content: '*';
	        color: #f56c6c;
	        margin-right: 4px;
	    }
	    .citys .el-form-item__label:before{
	        content: '*';
	        color: #f56c6c;
	        margin-right: 4px;
	    }
	}
	
</style>













